import React, { Component } from "react";
import PubSub from 'pubsub-js'
import "./index.css";

export default class List extends Component {
  state = {
    users: [], //初始化状态
    isFirst: true, //users初始值为数组
    isLoading: false, //标识是否处于加载中
    err: '' //存储请求相关的错误信息
  }
  componentDidMount(){
    this.token = PubSub.subscribe('atguigu',(_,data)=>{
      this.setState(data)
    })
  }
  componentWillUnmount(){
    PubSub.unsubscribe(this.token)
  }
  render() {
    const {users,isFirst,isLoading,err} = this.state
    return (
      <div className="row">
        {
        isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> : 
        isLoading ? <h4>Loading ... </h4> : 
        err ? <h3 style={{color:'red'}}>{err}</h3> : 
        users.map((userObj) => {
          return (
            <div className="card" key={userObj.id}>
              <a
                href={userObj.html_url}
                rel="noreferrer"
                target="_blank"
              >
                <img
                  alt="avatar"
                  src={userObj.avatar_url}
                  style={{ width: "100px" }}
                />
              </a>
              <p className="card-text">{userObj.login}</p>
            </div>
          );
        })}
      </div>
    );
  }
}
